<template>
  <div class="recharge-record">
    <a-form class="search-form" :form="form">
      <a-row :gutter="gutter">
        <a-col :lg="4" :xl="5" :xxl="4">
          <a-form-item label="充值类型">
            <a-select style="width: 100%" v-model="searchParams.type">
              <a-select-option
                v-for="item in typeData"
                :key="item.value"
                :value="item.value"
              >{{item.label}}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :lg="10" :xl="6" :xxl="5">
          <a-form-item label="充值时间">
            <a-range-picker :value="time" @change="dateChange"/>
          </a-form-item>
        </a-col>
        <a-col :lg="10" :xl="6" :xxl="7">
          <a-form-item label>
            <a-select style="width: 40%" v-model="searchParams.modeType">
              <a-select-option
                v-for="item in searchmode"
                :key="item.value"
                :value="item.value"
              >{{item.label}}</a-select-option>
            </a-select>
            <a-input
              style="width: 50%"
              v-model.trim="searchParams.condition"
              placeholder="请输入查询条件"
            />
          </a-form-item>
        </a-col>
        <a-col :lg="10" :xl="6" :xxl="5"></a-col>
        <a-col :lg="10" :xl="8" :xxl="3">
          <div class="top-btns">
            <a-button @click="resetcondition">重置</a-button>
            <a-button @click="searrchList" type="primary" html-type="submit">查询</a-button>
          </div>
        </a-col>
      </a-row>
    </a-form>
    <div class="search-result-list">
      <a-table
        :columns="columns"
        :rowKey="({number}) => number"
        :dataSource="columnsData"
        :pagination="pagination"
        :scrollX="scrollX"
        @change="pagesSearch"
        :loading="loading"
      ></a-table>
      <a-pagination
        class="pagination"
        :total="total"
        :pageSize="pages.pageSize"
        showSizeChanger
        showQuickJumper
        @change="pagesSearch"
        @showSizeChange="pagesSearch"
      />
    </div>
  </div>
</template>

<script>
import { type } from 'os'
import { isPhone, isNum } from '../../utils/check'
export default {
  data() {
    return {
      form: this.$form.createForm(this),
      loading: false,
      pages: {
        pageSize: 10,
        pageNum: 1
      },
      total: 0,
      gutter: {
        xs: 8,
        sm: 16,
        md: 16,
        lg: 24,
        xl: 24,
        xxl: 48
      },
      time: [],
      searchParams: {
        startTime: 0,
        endTime: 0,
        type: 0,
        modeType: 0,
        condition: ''
      },
      type: 0,
      modeType: 0,
      searchmode: [
        {
          value: 0,
          label: '姓名'
        },
        {
          value: 1,
          label: '账号'
        },
        {
          value: 2,
          label: '推荐人'
        },
        {
          value: 3,
          label: '手机号码'
        }
      ],
      typeData: [
        {
          value: 0,
          label: '全部'
        },
        {
          value: 1,
          label: '手动'
        },
        {
          value: 2,
          label: '微信'
        },
        {
          value: 3,
          label: '支付宝'
        }
      ],
      pagination: false,
      columnsData: [],
      scrollX: {},
      columns: [
        {
          title: '序号',
          dataIndex: 'number'
        },
        {
          title: '服务商账号',
          dataIndex: 'account'
        },
        {
          title: '服务商姓名',
          dataIndex: 'name'
        },
        {
          title: '服务商手机号',
          dataIndex: 'phone'
        },
        {
          title: '流水号',
          dataIndex: 'PipelineNumber'
        },
        {
          title: '充值金额（元）',
          dataIndex: 'RechargeAmount'
        },
        {
          title: '支付方式',
          dataIndex: 'PaymentType'
        },
        {
          title: '支付单号',
          dataIndex: 'PaymentNo'
        },
        {
          title: '充值状态',
          dataIndex: 'RechargeState'
        },
        {
          title: '缴纳时间',
          dataIndex: 'date'
        }
      ]
    }
  },
  beforeMount() {
    // let data = []
    // for (let i = 0; i < 10; i++) {
    //   data.push({
    //     number: i,
    //     account: `${i}${i}${i}${i}${i}${i}${i}${i}${i}${i}${i}`,
    //     name: '张三',
    //     phone: `1508879251${i}`,
    //     PipelineNumber: `${i}${i}${i}${i}${i}${i}${i}${i}${i}${i}${i}`,
    //     RechargeAmount: i * 1000,
    //     PaymentType: i % 2 === 0 ? '微信' : '支付宝',
    //     PaymentNo: `${i}${i}${i}${i}${i}${i}${i}${i}${i}${i}${i}`,
    //     RechargeState: i % 2 === 0 ? '成功' : '失败',
    //     date: new Date().getDate()
    //   })
    // }
    // this.columnsData = data
  },
  methods: {
    // 查询列表
    searrchList() {
      let { modeType, condition } = this.searchParams
      if (modeType === 1 && condition) {
        if (!isNum(condition)) {
          this.$message.warning('账号只能输入数字')
          return false
        }
      }
      if (modeType === 3 && condition) {
        if (!isPhone(condition)) {
          this.$message.warning('请输入正确的手机号')
          return false
        }
      }
      this.loading = true
      // 调用api
    },
    // 重置操作条件
    resetcondition() {
      this.time = []
      this.searchParams = {
        startTime: 0,
        endTime: 0,
        type: 0,
        modeType: 0,
        condition: ''
      }
      this.searrchList()
    },
    // 时间选择
    dateChange(date, [startTime, endTime]) {
      this.time = date
      this.searchParams.startTime =
        new Date(startTime + ' 00:00:00').getTime() / 1000
      this.searchParams.endTime =
        new Date(endTime + ' 23:59:59').getTime() / 1000
    },
    // 分页查询
    pagesSearch(pageNum, pageSize) {
      this.pages = {
        pageNum,
        pageSize
      }
      // 调用接口
      this.searrchList()
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
